<template>
  <view class="main">
    <!-- <view style="color: white; font-size: 40rpx; ">研究中心</view> -->
    <view class="mainBg"></view>
    <view class="main-head">
      <image class="titleText" src="/static/images/newIndex/title.png"></image>
      <image v-if="isLogin()" class="titleAdd" src="/static/images/newIndex/add.png" @click="addResearchCenter"></image>
    </view>
    <view class="main-container">

      <view v-if="isLogin()">
        <view class="searchBox">
          <image src="/static/images/newIndex/search.png"></image>
          <input type="text" placeholder="请输入搜索关键词" v-model="searchValue" @confirm="handleSearch" />
          <text @click="handleSearch">搜索</text>
        </view>
        <!-- <tui-searchbar></tui-searchbar> -->
        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
          <swiper-item v-for="(item, index) in swiperList" :key="index">
            <image :src="item.image" mode="aspectFill"></image>
          </swiper-item>
        </swiper>

        <!-- <view class="addButton" @click="addResearchCenter">
          <image src="/static/images/newIndex/add.png"></image>
          <text>添加研究中心</text>
        </view> -->

        <!-- <tui-form-button
          @click="addResearchCenter"
          style="margin-top: 20rpx; margin-bottom: 20rpx;border-radius: 20rpx !important;"
          background="#FFFFFF"
          color="#3E79DC"
          >
					
					&nbsp;添加研究中心</tui-form-button
        > -->

        <view class="list-card" v-for="(item, index) in hospitalLists" :key="item.id || index" :index="index">
          <view class="card-head">
            <view class="card-head-L">
              <view class="card-head-text">
                <text class="card-h-tName">ID：</text>
                <text class="card-h-tCon">{{ item.id }}</text>
              </view>
              <view class="card-head-text">
                <text class="card-h-tName">编码：</text>
                <text class="card-h-tCon">{{ item.code }}</text>
              </view>
            </view>
            <view class="card-head-R">
              <text class="card-h-tName">状态：</text>
              <view class="card-h-circle" :style="{ background: item.tag.color }"></view>
            </view>
          </view>
          <view class="card-headBg"></view>
          <view class="card-container">
            <view class="card-c-text">
              <text class="card-c-textL">研究中心名称：</text>
              <text class="card-c-textR">{{ item.name }}</text>
            </view>
            <view class="card-c-text">
              <text class="card-c-textL">主要研究者：</text>
              <text class="card-c-textR">{{ item.principle_nvestigator }}</text>
            </view>
            <view class="card-c-text">
              <text class="card-c-textL">研究中心编码：</text>
              <text class="card-c-textR">{{ item.code }}</text>
            </view>
          </view>
          <view class="card-ope">
            <image src="/static/images/newIndex/ope_edit.png" @click="editResearchCenter(item.id)"></image>
            <image src="/static/images/newIndex/ope_del.png" @click="deleteResearchCenter(item.id)"></image>
          </view>
        </view>

        <!-- <tui-list-cell v-for="(item, index) in hospitalLists" :index="index">
          <tui-card
            :title="item.title"
            :tag="item.tag"
            style="background-color: #f7faff"
          >
            <template v-slot:body>
              <view
                style="
                  background-color: #ffffff;
                  padding-left: 26rpx;
                  padding-right: 16rpx;
                  border-radius: 12rpx;
                  display: flex;
                  flex-direction: row;
                "
              >
                <view
                  style="
                    color: #101010;
                    flex: 2;
                    padding-top: 14rpx;
                    padding-bottom: 14rpx;
                  "
                >
                  <view style="line-height: 52rpx">
                    研究中心名称：{{ item.name }}
                  </view>
                  <view style="line-height: 52rpx">
                    主要研究者：{{ item.principle_nvestigator }}
                  </view>
                  <view style="line-height: 52rpx">
                    研究中心编码：{{ item.code }}
                  </view>
                </view>
              </view>
              <view class="tui-default">
                <view
                  style="
                    display: flex;
                    line-height: 60rpx;
                    justify-content: space-between;
                  "
                >
                  <tui-form-button
                    style="margin-left: 10rpx"
                    @click="editResearchCenter(item.id)"
                    size="28"
                    background="#EBF0FF"
                    color="#6997E5"
                    radius="8px"
                    >编辑</tui-form-button
                  >
                  <tui-form-button
                    style="margin-left: 10rpx"
                    size="28"
                    background="#FFEAEA"
                    color="#EC1D1D"
                    radius="8px"
                    >删除</tui-form-button
                  >
                </view>
              </view>
            </template>
</tui-card>
</tui-list-cell> -->
      </view>
    </view>

    <view class="container" v-if="!isLogin()">
      <view class="tip-text">暂无内容，请登录后查看</view>
      <button class="login-btn" @click="goToLogin">登录</button>
    </view>

    <tui-nomore text="没有更多数据了" v-if="noMoreData"></tui-nomore>
  </view>
</template>

<script>
import { isLogin } from "@/common/util.js";

import tuiCard from "@/components/thorui/tui-card/tui-card.vue";
import tuiListView from "@/components/thorui/tui-list-view/tui-list-view.vue";
import tuiNomore from "@/components/thorui/tui-nomore/tui-nomore.vue";
import tuiSearchbar from "@/components/thorui/tui-searchbar/tui-searchbar.vue";
import config from "../../common/config";
import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue";

export default {
  components: {
    tuiCard,
    tuiListView,
    tuiNomore,
    tuiSearchbar,
    tuiIcon,
  },
  data() {
    return {
      swiperList: [
        { image: config.baseUrl + "/assets/img/login/1.jpg" },
        { image: config.baseUrl + "/assets/img/login/2.jpg" },
        { image: config.baseUrl + "/assets/img/login/3.jpg" },
      ],
      searchValue: "",
      page: 1,
      size: 10,
      hospitalLists: [],
      noMoreData: false,
    };
  },
  onShow() {
    // 页面显示时刷新数据，确保从其他页面返回时数据是最新的
    this.page = 1;
    this.noMoreData = false;
    this.loadData();
  },
  onPullDownRefresh() {
    this.page = 1;
    this.noMoreData = false;
    this.loadData();
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    if (this.noMoreData) {
      return;
    }
    this.page++;
    this.loadData(true);
  },
  methods: {
    isLogin() {
      return isLogin();
    },
    goToLogin() {
      // 跳转到登录页，假设你的登录页路径是 /pages/login/login
      uni.navigateTo({
        url: "/pages/my/login",
      });

      // 或者使用重定向（关闭当前页）
      // uni.redirectTo({
      //   url: '/pages/login/login'
      // });
    },
    addResearchCenter() {
      uni.navigateTo({
        url: "/pages/researchCenter/add",
      });
    },
    editResearchCenter(id) {
      uni.navigateTo({
        url: "/pages/researchCenter/detail?id=" + id,
      });
    },
    // 搜索功能
    handleSearch() {
      if (!this.searchValue.trim()) {
        // 如果搜索关键词为空，重新加载所有数据
        this.loadData();
        return;
      }

      this.page = 1;
      this.noMoreData = false;

      // 调用搜索接口
      this.http
        .get("/api/hospital/list?page=" + this.page + "&size=" + this.size + "&keyword=" + encodeURIComponent(this.searchValue))
        .then((res) => {
          if (res.data && res.data.code == 1) {
            this.hospitalLists = res.data.data;
            if (res.data.data.length < this.size) {
              this.noMoreData = true;
            }
          }
        })
        .catch((err) => {
          uni.showToast({
            title: "搜索失败",
            icon: "none"
          });
        });
    },
    // 加载数据的通用方法
    loadData(isLoadMore = false) {
      const url = this.searchValue.trim()
        ? "/api/hospital/list?page=" + this.page + "&size=" + this.size + "&keyword=" + encodeURIComponent(this.searchValue)
        : "/api/hospital/list?page=" + this.page + "&size=" + this.size;

      this.http
        .get(url)
        .then((res) => {
          if (res.data && res.data.code == 1) {
            if (isLoadMore) {
              this.hospitalLists = [...this.hospitalLists, ...res.data.data];
            } else {
              this.hospitalLists = res.data.data;
            }

            if (res.data.data.length < this.size) {
              this.noMoreData = true;
            }
          }
        })
        .catch((err) => {
          if (isLoadMore) {
            this.page--; // 加载失败时回退页码
          }
        });
    },

    // 删除研究中心
    deleteResearchCenter(id) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个研究中心吗？删除后无法恢复。',
        showCancel: true,
        cancelText: '取消',
        confirmText: '删除',
        confirmColor: '#EB0909',
        success: (res) => {
          if (res.confirm) {
            // 用户点击了确定，执行删除操作
            this.http
              .post("/api/hospital/delete", {
                id: id,
              })
              .then((res) => {
                if (res.data.code == 1) {
                  uni.showToast({
                    title: res.data.msg || '删除成功',
                    icon: 'success'
                  });
                  // 重新加载数据
                  this.page = 1;
                  this.noMoreData = false;
                  this.loadData();
                } else {
                  uni.showToast({
                    title: res.data.msg || '删除失败',
                    icon: 'none'
                  });
                }
              })
              .catch((err) => {
                uni.showToast({
                  title: '删除失败，请重试',
                  icon: 'none'
                });
              });
          }
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.main {
  /* height: 100vh; 或其他适当高度 */
  width: 100%;
  /* overflow: auto; */
  padding-top: 80rpx;
  position: relative;
  background: rgba(235, 239, 244, 1);
}

.mainBg {
  background-image: url("/static/images/newIndex/index_bg.png") !important;
  background-size: 100% 100%;
  width: 100%;
  height: 692rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 40rpx 40rpx 25rpx;
}

.titleText {
  width: 160rpx;
  height: 44rpx;
}

.titleAdd {
  width: 60rpx;
  height: 60rpx;
}

.main-container {
  width: 690rpx;
  margin: 0 auto;
}

.searchBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 30rpx;
  gap: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 25rpx;
  position: relative;
  z-index: 10;
}

.searchBox image {
  width: 48rpx;
  height: 48rpx;
}

.searchBox input {
  flex: 1;
  border: none;
  background: none;
}

.searchBox text {
  font-weight: 500;
  font-size: 28rpx;
  color: #3e79dc;
}

.addButton {
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
  padding: 20rpx 0;
  width: 100%;
  background: #fff;
  margin: 25rpx 0;
}

.addButton image {
  width: 74rpx;
  height: 74rpx;
}

.addButton text {
  font-weight: 500;
  font-size: 32rpx;
  color: #3e79dc;
}

.list-card {
  background: #fff;
  border-radius: 20rpx;
  position: relative;
  width: 100%;
  border-radius: 20rpx;
  height: 100%;
  padding-top: 115rpx;
  background: #f8faff;
  padding-bottom: 20rpx;
  margin-bottom: 35rpx;

  .card-head {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 88rpx;
    width: calc(100% - 52rpx);
    background: linear-gradient(to right,
        rgba(62, 121, 220, 1),
        rgba(77, 163, 255, 1));
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26rpx;
    border-radius: 20rpx 20rpx 0 0;

    .card-head-L {
      display: flex;
      align-items: center;
      gap: 20rpx;
    }

    .card-h-tName {
      font-weight: 400;
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.8);
    }

    .card-h-tCon {
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
    }

    .card-head-R {
      display: flex;
      align-items: center;
    }

    .card-h-circle {
      width: 35rpx;
      height: 35rpx;
      border-radius: 50%;
    }
  }

  .card-headBg {
    background: url("/static/images/newIndex/card_bg.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    height: 88rpx;
    width: 100%;
  }
}

.card-container {
  width: 85%;
  margin: 0 auto;
  padding: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 25rpx;
  margin-bottom: 25rpx;
}

.card-c-text {
  display: flex;
  align-items: center;
  gap: 5rpx;
}

.card-c-textL {
  font-weight: 400;
  font-size: 26rpx;
  color: #999999;
  white-space: nowrap;
  width: 200rpx;
  display: block;
}

.card-c-textR {
  font-weight: 400;
  font-size: 28rpx;
  color: #000000;
  width: 400rpx;
}

.card-ope {
  width: 85%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
}

.card-ope image {
  width: 306rpx;
  height: 72rpx;
  border-radius: 0;
}

swiper {
  height: 350rpx;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}

image {
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
}

.tui-list-view {
  margin: 0rpx;
}

.tui-list-cell {
  margin: 0rpx;
}

.tui-card {
  margin: 0rpx;
  padding: 6rpx;
}

.tui-default {
  font-size: 32rpx;
  margin: 0rpx 0rpx 0rpx 0rpx;
  padding: 16rpx;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f8f8f8;
}

.tip-text {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.login-btn {
  width: 200px;
  background-color: #5d76f4;
  color: white;
  border-radius: 5px;
}
</style>
